import QrCodeNode from './qr-code-node.vue'
import TimeNode from './time-node.vue'
import BarCodeNode from './bar-code-node.vue'
import DateNode from './date-node.vue'
import ImgNode from './img-node.vue'
import NumNode from './num-node.vue'
import RectNode from './rect-node.vue'
import TextNode from './text-node.vue'
import LineNode from './line-node.vue'
import { register } from '@antv/x6-vue-shape'
import { isTrueForDict } from '@/utils/dict'
import { AlignmentEnum } from '@/enum/graph.enum.js'
import { loadFont } from '@/utils/loadFont.js'
export const initRegisterNodes = () => {
  register({
    shape: 'CONTENT_TYPE_ABORDER',
    width: 100,
    height: 100,
    component: RectNode
  })
  register({
    shape: 'CONTENT_TYPE_TEXT',
    width: 100,
    height: 100,
    component: TextNode
  })
  register({
    shape: 'CONTENT_TYPE_IMAGE',
    width: 100,
    height: 100,
    component: ImgNode
  })
  register({
    shape: 'CONTENT_TYPE_DATE',
    width: 100,
    height: 100,
    component: DateNode
  })
  register({
    shape: 'CONTENT_TYPE_QRCODE',
    width: 100,
    height: 100,
    component: QrCodeNode
  })
  register({
    shape: 'CONTENT_TYPE_TIME',
    width: 100,
    height: 100,
    component: TimeNode
  })
  register({
    shape: 'CONTENT_TYPE_BARCODE',
    width: 100,
    height: 100,
    component: BarCodeNode
  })
  register({
    shape: 'CONTENT_TYPE_NUMBER',
    width: 100,
    height: 100,
    component: NumNode
  })
  register({
    shape: 'CONTENT_TYPE_LINE',
    width: 100,
    height: 100,
    component: LineNode
  })
}

export const getStyles = (nodeData) => {
  const { visible, contentColor, borderSize = 1, borderColor = 'black', contentAlignment, fontBold, fontItalic, textDecoration, contentBackgroundColor, contentVerticalAlignment, lineSpacing, backgroundTransparent, contentReverse, border, fontSize, fontType, cornerWidth, cornerHeight } = nodeData
  const styles = {
    borderRadius: `${cornerWidth ? cornerWidth + 'px' : '0px'} ${cornerHeight ? cornerHeight + 'px' : '0px'}`,
    backgroundColor: isTrueForDict(backgroundTransparent) ? 'transparent' : contentBackgroundColor,
    display: isTrueForDict(visible) ? 'flex' : 'none',
    color: contentColor || '#000000',
    justifyContent: AlignmentEnum[contentAlignment] || 'center',
    alignItems: AlignmentEnum[contentVerticalAlignment] || 'center',
    border: isTrueForDict(border) ? `${borderSize}px solid ${borderColor}` : 'none'
  }
  if (contentReverse) {
    styles.filter = `invert(${isTrueForDict(contentReverse) ? 1 : 0})`
  }
  if (lineSpacing) {
    styles.lineHeight = lineSpacing
  }
  // 字体大小
  if (fontSize) {
    styles.fontSize = `${fontSize}px`
  }
  // 字体
  if (fontType) {
    styles.fontFamily = fontType
    loadFont(fontType)
  }
  if (fontBold) {
    styles.fontWeight = 'bold'
  }
  if (fontItalic) {
    styles.fontStyle = 'italic'
  }
  if (textDecoration) {
    styles.textDecoration = textDecoration === 'strikethrough' ? 'line-through' : textDecoration
  }
  return styles
}
